<template>
  <page-header-wrapper :title="false">
    <typicalForm :formConfig="formConfig">
      <div style="width: 80%;margin: 0 20px 0 auto;height: 400px;background: #f1f1f1" slot="first" slot-scope="data">配置页插槽 {{ data.val }}</div>
      <div style="width: 80%;margin: 0 auto 0 20px;height: 300px;background: #c1c1c1" slot="second" slot-scope="data">配置页插槽 {{ data.val }}</div>
    </typicalForm>
  </page-header-wrapper>
</template>
<script>
import typicalForm from '@/components/typicalForm';
export default {
  name: 'Demo',
  components: {
    typicalForm: typicalForm
  },
  data() {
    return {
      // 表单组件配置
      formConfig: {
        formItemList: [
          {
            type: 'input',
            prop: 'searchTitle',
            value: '',
            label: '标题',
            span: 24
          },
          {
            type: 'input',
            prop: 'searchTitle',
            value: '',
            label: '标题',
            span: 12
          },
          {
            type: 'input',
            prop: 'searchTitle',
            value: '',
            label: '标题',
            span: 12
          },
          {
            type: 'input',
            prop: 'searchTitle',
            value: '',
            label: '标题',
            span: 6
          },
          {
            type: 'input',
            prop: 'searchTitle',
            value: '',
            label: '标题',
            span: 6
          },
          {
            type: 'input',
            prop: 'searchTitle',
            value: '',
            label: '标题',
            span: 6
          },
          {
            type: 'input',
            prop: 'searchTitle',
            value: '',
            label: '标题',
            span: 6
          },
          {
            type: 'input',
            prop: 'code',
            value: '',
            label: '充电柜编号'
          },
          {
            type: 'select',
            prop: 'name',
            value: '',
            label: '充电柜名称',
            linkage: {
              isDynamic: true,
              aEmptyProp: ['a', 'b', 'c'],
              aUpdateList: ['a', 'c']
            }
          },
          {
            type: 'select',
            prop: 'model.id',
            value: '',
            label: '设备型号',
            optList: []
          },
          {
            type: 'input',
            prop: 'binCount',
            value: '',
            label: '格口个数'
          },
          {
            type: 'selectTree',
            prop: 'organization.id',
            value: '',
            label: '内容c',
            optList: [],
            span: 12
          },
          {
            type: 'input',
            prop: 'productionDate',
            value: '',
            label: '出厂日期'
          },
          {
            type: 'input',
            prop: 'installDate',
            value: '',
            label: '安装日期'
          },
          {
            type: 'input',
            prop: 'a1.a2.a3.a4.a5.a6',
            value: '',
            label: '保修到期',
            span: 24
          },
          {
            type: 'slot',
            slot: 'first',
            prop: 'slotFirst',
            value: '321slotFirst123',
            span: 12
          },
          {
            type: 'slot',
            slot: 'second',
            prop: 'slotSecond',
            value: '321slotSecond123',
            span: 12
          },
          {
            type: 'input',
            prop: 'simIccid',
            value: '',
            label: 'SIM卡ICCID'
          },
          {
            type: 'input',
            prop: 'simExpire',
            value: '',
            label: 'SIM卡到期'
          },
          {
            type: 'input',
            prop: 'loginName',
            value: '',
            label: '登录用户名'
          },
          {
            type: 'input',
            prop: 'loginPass',
            value: '',
            label: '登录密码'
          },
          {
            type: 'input',
            prop: 'aesKey',
            value: '',
            label: '密钥'
          },
          {
            type: 'input',
            prop: 'address',
            value: '',
            label: '地址'
          },
          {
            type: 'input',
            prop: 'remarks',
            value: '',
            label: '备注',
            span: 12
          },
          {
            type: 'input',
            prop: 'lng',
            value: '',
            label: '经度',
            span: 12
          }
        ],
        rules: {
          name: [
            { required: true, message: '请输入充电柜名称', trigger: 'blur' },
            { max: 25, message: '最大长度不能超过25个字', trigger: 'blur' }
          ],
          code: [{ required: true, message: '请输入充电柜编号', trigger: 'blur' }]
        },
        onSubmit: this.onSubmit,
        onClose: null,
        updateOptList: this.updateOptList,
        onDynamic: this.onDynamic,
        span: 6
      }
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    /**
     * [onSubmit 表单验证成功后回调]
     * @param  {[type]} form [表单]
     * @return {[type]}      [description]
     */
    onSubmit(form) {
      console.log(form);
      // 处理表单用途
    },
    /**
     * [updateOptList 更新字段]
     * @param  {[type]} sourceProp     [来源属性]
     * @param  {[type]} sourceVal      [来源属性值]
     * @param  {[type]} activationProp [更新字典属性]
     * @return {[type]}                [description]
     */
    updateOptList(sourceProp, sourceVal, activationProp) {
      console.log(sourceProp, sourceVal, activationProp);
      // 判断更新配置上对应的字段
    },
    /**
     * [onDynamic 触发动态业务]
     * @param  {[type]} sourceProp [来源属性]
     * @param  {[type]} sourceVal  [来源属性值]
     * @return {[type]}            [description]
     */
    onDynamic(sourceProp, sourceVal) {
      this.$set(this.formConfig.formItemList[0], 'hide', !this.formConfig.formItemList[0].hide);
      // 判断动态业务节点，设置对应配置项进行展示隐藏
    }
  }
};
</script>

<style scoped>
</style>
